<meta charset="UTF-8">
<title>Tab</title>

<div class="tab2">
	<ul>
		<li>公司简介</li>
		<li>资质证照</li>
		<li>荣誉证书</li>
	</ul>
	<div class="content">
		<div>
			自古以来，中华民族就善于运用契约进行交往。从杨国桢在《明清土地契约文书研究》一书中期待“中国契约学”研究以来，传统契约的论著、编著就不绝如缕。张传玺的煌煌三大册《中国历代契约粹编》，把中国的契约史追索到尚无无文字记载的时代;而他的《契约史买地券研究》，更系统地梳理了中国古代契约的源流关系和分类形式，从中可见，在周代就存在“万民约”与“邦国约”的分野。契约无论在官方，还是在民间，都获得过广泛的关注。至于王旭的《契纸千年——中国传统契约的形式与演变》，则把笔触落脚到近千年来我国丰富多样的契约之流变研究上。最近十年来，有关传统契约研究的论著可谓空前繁荣!
		</div>
		<div>
			之所以如此，端在于中国传统中存在着发达的契约。予谓不信，可看看早年由福建师范大学内部印行的两册本《明清福建经济契约文书选集》，中国社会科学出版社出版的《自贡盐业契约档案选集》，花山文艺出版社出版的共二十册的《徽州千年契约文书》;再看看近些年由安徽师范大学出版社出版的十卷本的《千年徽州契约文书集萃》，广西师范大学出版社出版的四辑共四十册《徽州文书》、三辑共三十册的《清水江文书》，民族出版社出版的多卷本《贵州清水江流域明清契约文书》，凤凰出版社出版的《敦煌契约文书辑校》，天津古籍出版社出版的《清代宁波契约文书辑校》，浙江大学出版社出版的《清代浙东契约文书辑选》……不难发现，中国传统契约文书的整理出版，完全可称为如雨后春笋般在迅速成长!
		</div>
		<div>
			笔者出于个人兴趣，在关注这些已经整理出版的、卷帙浩繁的契约文献的同时，也游走各地，或亲自搜集各类契约文书，或到一些地方档案馆查看其业已编辑成册、内部印行的传统契约文书，如在台湾宜兰、高雄，山东青岛、威海，贵州锦屏、从江等地档案机构或民间都见到过相关契约文献。记忆尤深的一次，是我和几位学生共游山东浮来山。在一处值班室里，居然发现有人以清代契约文本粘糊墙壁!足见只要我们稍加留意，在这个文明发展历经数千年的国度，不时可以发现一些令人称心的古代契约文献。
		</div>
	</div>
</div>


<style>
	dl,dt,dd,ul,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h5{margin:0;padding:0;}
	ul li{list-style-type:none;}

	.tab2 > ul {
		overflow: hidden;
		zoom: 1;
	}
	
	.tab2 > ul > li {
		background-color: #e7e7e7;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		list-style: none;
		text-align: center;
		height: 35px;
		padding: 8px;
		border: 1px solid transparent;
		
		display: block;
		float: left;
		margin-bottom: 0;
		margin-right: 1px;
		border-bottom: 0;
	}
	
	.tab2 > ul > li.selected {
		background-color: white;
		border-color: #ff4400;
		z-index: 999999;
	}
	
	.tab2 > div {
		margin-top: -1px;
		position: relative;
		border: 1px solid #ff4400;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 1;
	}
	
	.tab2 > div > div {
		display: none;
		padding: 10px;
		font-size: .9rem;
		text-align: justify;
	}
	
	.tab2 > div > div.selected {
		display: block;
	}
</style>

<script>
	/////////////////////--------------------公共方法 -------------START
	
	var emptyStr = '';
	// 允许用户输入 .abc/abc 的 CSS Selector，推荐 abc 即可
	function removeFirstDot(str){
		if(str && str.charAt(0) === '.'){
			var arr = str.split(emptyStr);
			arr.shift();
			return arr.join(emptyStr);
		}
		
		return str;
	}
		
	/**
	 * 增加元素样式。
	 * @param {String} cls
	 */
	Element.prototype.addCls = function (cls) {
		cls = removeFirstDot(cls);
	
		var _cls = this.className;
		if (_cls.indexOf(cls) === -1) {
			// not found, so add it
			if (_cls === '')this.className = cls;
			else this.className += ' ' + cls;
		}
	}
	
	/**
	 * 移除元素样式。
	 * @param {String} cls
	 */
	Element.prototype.removeCls = function (cls) {
		cls = removeFirstDot(cls);
		var _cls = this.className;
		var reg = new RegExp('\\s?\\b' + cls + '\\b', 'ig');
		if (reg.test(_cls)) 
			this.className = _cls.replace(reg, '');// remove it
	}
	 
	/////////////////////--------------------公共方法 -------------END

	SimpleTab = function(container) {
		this.el = container;
		var ul = container.querySelector('ul');
		this.buttons = ul.children, // tab候选栏strip
		this.tabs = container.querySelector('.content').children;
		ul.onclick = onTabChooserPressHandler.bind(this);
	}
	
	/**
	 * 跳到指定的 tab，仿佛好象点击那样
	 * @param {int} index
	 */
	SimpleTab.prototype.jump = function(index){
		var btn = this.buttons[index];
		onTabChooserPressHandler.call(this, {
			target : btn,
			currentTarget : this.el.querySelector('ul')
		});
	}
	
	var onPressed_ClassName = 'selected';
	// 登记的单击事件是整个 tan panel
	function onTabChooserPressHandler(e) {
		// 搜索 el 下的 li 元素，到容器为止
		var el = e.target;
		if (el.tagName != 'LI') return;
	
		var buttons = e.currentTarget.children, // tab候选栏strip
			tabs = e.currentTarget.parentNode.querySelector('.content').children;
		!buttons.length && console.log('该控件未发现任何 strip。');
		
		for (var nextIndex = 0, j = buttons.length; nextIndex < j; nextIndex++)
			if (buttons[nextIndex] == el)
				break; // 获取 nextIndex
				
		// 查找与 index 相等的 item 设置其高亮，否则移除样式。
		var btn, showTab;
		for (var i = 0, j = buttons.length; i < j; i++) {
			btn = buttons[i], showTab = tabs[i];
			// debugger;
			if (nextIndex == i && btn.className.indexOf(onPressed_ClassName) == -1) { // 找到目标项
				btn.addCls(onPressed_ClassName);
				showTab.addCls(onPressed_ClassName);
				this.currentIndex = i; // 保存当前游标
	
			
			} else if (btn == el && btn.className.indexOf(onPressed_ClassName) != -1) {
				// 已在当前项
			} else if (btn.className.indexOf(onPressed_ClassName) != -1) {
				btn.removeCls(onPressed_ClassName);
				showTab.removeCls(onPressed_ClassName);
			}
		}
	}
	
	new SimpleTab(document.querySelector('.tab2')).jump(0);
</script>
